<template>
  <div>
    <!-- //轮播图组件 -->
    <Carousel></Carousel>
    <!-- 搜索框组件 -->
    <Search></Search>
    <!-- -->
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 等级子组件 -->
        <Level @getLevel="getLevel"></Level>
        <!-- 地区子组件 -->
        <Region @getRegion="getRegion"></Region>
        <!-- 展示医院内容-->
        <div class="hospital" v-if="HospitalArr.length>0">
          <Card v-for="item in HospitalArr" :key="item.id" class="item" :hospitalInfo="item" ></Card>
         
        </div>
        <el-empty description="没有对应类型的医院，请换个地区或者医院等级再尝试哦" v-else />
       
        <el-pagination
        class="pagenation"
          v-model:current-page="PageNo"
          v-model:page-size="PageSiez"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout=" prev, pager, next, jumper,->,total, sizes"
          :total="total"
            @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
      <el-col :span="4">
        <tip></tip>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
//引入组合式api
import {ref,onMounted} from "vue";
//引入接口类型
import type {AllHospital,content} from '@/api/home/type.ts'
//引入组件
import Carousel from "@/pages/Home/Carousel/index.vue";
import Search from "./search/index.vue";
import Level from "./Level/index.vue";
import Region from "./region/index.vue";
import Card from "./card/index.vue";
import tip from "./tip/index.vue";
//引入接口
import {reqGetHospital} from '@/api/home/index.ts'

//当前页数
let PageNo = ref<number>(1);
//每页展示多少个
let PageSiez = ref<number>(10);
//总页数
let total = ref<number>(0);
//存储已有的医院数据
let HospitalArr = ref<content>([]);
//存储医院等级
let hospitalLevel = ref<string>("");
//存储医院地区id
let RegionId = ref<string>("");
//挂载时获取医院数据
onMounted(()=>{
  HasHospital();
})
//获取医院全部数据的回调
const HasHospital = async (page=1)=>{
  PageNo.value = page;
  let reslut:AllHospital = await reqGetHospital(PageNo.value,PageSiez.value,hospitalLevel.value,RegionId.value)

  if(reslut.code == 200) {}
    HospitalArr.value = reslut.data.content;
    total.value = reslut.data.totalElements;
}
//当前页数改变时触发
const handleCurrentChange = (val:number)=>{
  HasHospital(val);
}
//当每页展示多少个改变时触发
const handleSizeChange = (val:number)=>{
  PageSiez.value = val;
  HasHospital();
  
}
//筛选医院等级回调
const getLevel = (Level:string)=>{
  //整理数据
  hospitalLevel.value = Level;
  //发送请求
  HasHospital();
}
//筛选医院地区回调
const getRegion = (region:string)=>{
 //整理数据
  RegionId.value = region;
  //发送请求
  HasHospital();
}
</script>
<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 48%;
    margin: 10px 5px;
  }
}
.pagenation {
  margin: 15px 0px;
}
</style>
